<template>
  <div class="dashboard-container">
    <div class="app-container">
      <shop-list @delGood="handleList" :my-list="list"></shop-list>
    </div>
  </div>
</template>

<script>
import shopList from './components/list.vue';
export default {
  name: 'Social',
  components: {
    shopList,
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.list = [
      {
        url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=250&h=250&f=webp&q=90',
        title: 'Redmi Note 11T Pro1',
        price: '1999',
        id: 1,
      },
      {
        url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?thumb=1&w=250&h=250&f=webp&q=90',
        title: 'Redmi Note 11T Pro2',
        price: '2999',
        id: 2,
      },
      {
        url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f84503dbf5adbdf17111c61d4a7cf893.jpg?thumb=1&w=250&h=250&f=webp&q=90',
        title: 'Redmi Note 11T Pro3',
        price: '3999',
        id: 3,
      },
      {
        url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/01d9571051a91e540e5c644fa60cc858.jpg?thumb=1&w=250&h=250&f=webp&q=90',
        title: 'Redmi Note 11T Pro4',
        price: '4999',
        id: 4,
      },
    ];
  },
  mounted() {},
  methods: {
    handleList(id) {
      console.log('id:', id);
      this.list.forEach((item, index) => {
        if (item.id === id) {
          this.list.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style lang="scss"></style>
